<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta content="IE=edge" http-equiv="X-UA-Compatible">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">
  <title>初识canvas</title>
  <style>
      #cs {
          background-color: aquamarine;
      }
  </style>
</head>

<body>
<canvas height="500" id="cs" width="600"></canvas>

</body>
<script>
  let cs = document.querySelector('#cs')
  let ctx = cs.getContext('2d') // 画笔

  let chatPath = new Path2D()

  chatPath.moveTo(200, 300)
  chatPath.quadraticCurveTo(150, 300, 150, 200)
  chatPath.quadraticCurveTo(150, 100, 300, 100)
  chatPath.quadraticCurveTo(450, 100, 450, 200)
  chatPath.quadraticCurveTo(450, 300, 250, 300)
  chatPath.quadraticCurveTo(250, 350, 150, 350)
  chatPath.quadraticCurveTo(200, 350, 200, 300)

  ctx.clip(chatPath)

  let img = new Image()
  img.src = '../img/ycy.png'
  img.onload = function () {
    ctx.drawImage(img, 0, 0, 500, 500)
    ctx.lineWidth = 20
    ctx.stack(chatPath)
  }


</script>

</html>